<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='https://cdn.staticfile.org/react/16.4.0/umd/react.development.js'></script>
    <script src='https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js'></script>
    <!-- 生产环境中不建议使用 -->
    <script src='https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js'></script>
    <!-- PropTypes文件 -->
    <script src='https://unpkg.com/prop-types@15.6.2/prop-types.js'></script>
</head>

<body>
    <div id='app'>
    </div>
    <script type='text/babel'>
        class Demo extends React.Component{
            state  = {name:'123'}

            changeName = ()=>{
                this.setState({name:'234'})
            }

            /*
                其实这个钩子就像拍照片一样，因为它在更新开始之前被调用，所以可以拿到更新前的state等内容，然后做个记录，值得注意的是，这个函数也必须要返回一个东西，返回的东西会被componentDidUpdate接收到。也就相当于这个钩子拍了照片然后传给了componentDidUpdate。
                不过还是要跟你讲一句，这个钩子在未来的开发中一般很少可以说不会用到，所以还是那句话，别学的用力太猛了
            */
            getSnapshotBeforeUpdate(){
                console.log('getSnapshotBeforeUpdate')
                return 123
            }

            /*
                补充一个知识点, componentDidUpdate()是可以接收到三个参数的:
                    第一个参数：prePros，也就是更新前的props
                    第二个参数：preState，也就是更新前的state
                    第三个参数：snapshot，也就是getSnapshotBeforeUpdate返回的东西
            */
            componentDidUpdate(preProps,preState,snapshot){
                console.log(preProps,preState,snapshot)
            }

            render(){
                return (
                    <div>
                        <h1 onClick={this.changeName}>{this.state.name}</h1>    
                    </div>
                )
            }
        }

        ReactDOM.render(<Demo/>,document.getElementById('app'))
    </script>
</body>

</html>